<template>
  <div class="line-echart">
    <base-chart :options="options" :height="height" />
  </div>
</template>

<script setup>
import BaseChart from '@/base-ui/echart/base-chart.vue'
import { computed } from 'vue'

const props = defineProps({
  height: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  xLabels: {
    type: Array,
    default: () => []
  },
  realwaterLevel: {
    type: Array,
    default: () => []
  },
  simulateWater: {
    type: Array,
    default: () => []
  },
  rainArea: {
    type: Array,
    default: () => []
  },
  simulateFlow: {
    type: Array,
    default: () => []
  },
  realFlow: {
    type: Array,
    default: () => []
  }
})

const options = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: [
        { name: '入流流量', itemStyle: { opacity: 0 } },
        { name: '出流流量', itemStyle: { opacity: 0 } },
        { name: '库水位', itemStyle: { opacity: 0 } }
      ]
    },
    grid: {
      top: '18%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2001-06-05', '2010-06-05', '2011-06-05', '2013-06-05', '2016-06-05', '2020-06-05'],
      axisTick: {
        alignWithLabel: true, // 刻度与文案居中对齐
        interval: 0
      },
      axisLabel: {
        show: true,
        interval: 0
      }
    },
    yAxis: {
      type: 'value'
    },
    dataZoom: {
      start: 0,
      end: 80,
      type: 'slider',
      show: true,
      bottom: '2%',
      height: 20
    },
    series: [
      {
        type: 'line',
        name: '入流流量',
        // 标记的图形
        lineStyle: {
          color: 'rgba(94, 255, 0, 1)'
        },
        symbol: 'none',
        data: ['10', '300', '300', '120', '160', '60']
      },
      {
        type: 'line',
        name: '出流流量',

        lineStyle: {
          color: 'rgba(248, 224, 40, 1)'
        },
        // 标记的图形
        symbol: 'none',
        data: ['100', '200', '330', '220', '200', '600']
      },
      {
        type: 'line',
        name: '库水位',

        lineStyle: {
          color: 'rgba(237, 35, 13, 1)'
        },
        // 标记的图形
        symbol: 'none',
        data: ['50', '20', '130', '120', '100', '200']
      }
    ]
  }
})
</script>

<style lang="less" scoped>
.line-echart {
  height: 100%;
}
</style>
